import React, { Component } from 'react';

import { Redirect } from 'react-router-dom';

import { Card, Space, List, Image, message } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';

import { reqCategoryInfo, IMG_URL, IMG_FALLBACK } from '../../../api';
import LinkButton from '../../../components/LinkButton';

import './index.less';

export default class Detail extends Component {

    state = {
        category: []
    }

    async getCategoryInfo(id) {
        const res = await reqCategoryInfo(id);

        if (res.status === 0 || res.data) {
            const { category } = this.state;
            const len = category.length;
            this.setState({
                category: [res.data.name + (len === 0 ? '' : ' ···> '), ...category]
            });
            if (res.data.parentId && res.data.parentId !== '0') {
                this.getCategoryInfo(res.data.parentId);
            }
        } else {
            message.error('获取分类数据错误！');
        }
    }

    componentDidMount() {
        const { state } = this.props.location;
        if (state) {
            const { product } = state;
            const { categoryId } = product;
            this.getCategoryInfo(categoryId);
        }
    }

    render() {
        const { state } = this.props.location;
        const { history } = this.props;

        if (!state) {
            return <Redirect to="/product" />
        }

        const { category } = this.state;
        const { product } = state;
        const { name, desc, price, imgs, detail } = product;


        const data = [
            { title: '商品名称', content: name },
            { title: '商品描述', content: desc },
            { title: '商品价格', content: price + '元' },
            { title: '所属分类', content: category },
            {
                title: '商品图片',
                content: (
                    <Space>
                        {
                            imgs.map((img, idx) => (
                                <Image
                                    width={120}
                                    height={120}
                                    key={idx}
                                    src={IMG_URL + img}
                                    alt={name}
                                    fallback={IMG_FALLBACK}
                                />
                            ))
                        }
                    </Space>
                )
            },
            { title: '商品详情', content: <div dangerouslySetInnerHTML={{ __html: detail }}></div> },
        ]

        return (
            <Card
                title={
                    <Space className="product-detail-header">
                        <LinkButton onClick={() => history.push('/product')}><ArrowLeftOutlined className="product-detail-header-icon" /></LinkButton>
                        <h2>商品详情</h2>
                    </Space>
                }
                className="product-detail"
            >
                <List
                    size="large"
                    dataSource={data}
                    renderItem={item => (
                        <List.Item className="product-detail-item">
                            <h3>{item.title}：</h3> {item.content}
                        </List.Item>
                    )}
                    className="product-detail-list"
                />
            </Card>
        )
    }
}
